<!--
 * @Author: liaoxing
 * @Date: 2021-08-09 17:11:26
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-24 10:57:54
 * @Description: 看板
 * @FilePath: \数据中心\src\components\_ImitateNav\ImitateNav.vue
-->
<template>
  <div class="imitateNav flex">
    <div class="imitateNavLeft flex">
      <span class="iconLine bg-blue"></span>
      <div class="imitateNavTitle">{{ value }}</div>
    </div>
    <div class="imitateNavRight flex">
      <div
        v-for="(item, index) in iconList"
        :key="'icon' + index"
        class="flex"
        @click="imitateBrowser(index)"
      >
        <img :src="require('../../assets/icons/' + item.iconName + '.png')" />
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'], // 引入方法
  name: 'imitatenav',
  props: ['value'],
  data() {
    return {
      iconList: [
        { title: '全屏', iconName: 'fullScreen' },
        { title: '刷新', iconName: 'refresh' },
        { title: '返回', iconName: 'back' },
      ],
      fullScreenDom: null,
      bodyFullScreen: false,
    }
  },
  mounted() {
    this.fullScreenDom = document.querySelector('.fullScreenBox')
    document.addEventListener('keydown', this.jugeKey)
    window.onresizeArr.push(this.lisNavFullSCreen)
    this.lisFullCreen()
  },
  methods: {
    imitateBrowser(index) {
      switch (index) {
        case 0:
          this.util.fullScreen(this.fullScreenDom)
          break
        case 1:
          this.refresh()
          break
        case 2:
          this.back()
          break
      }
    },
    refresh() {
      this.reload() // 调用方法
    },
    back() {
      window.history.back(-1)
    },
    lisFullCreen() {
      window.onresize = () => {
        for (let i of window.onresizeArr) {
          i()
        }
      }
    },
    /* 模拟导航模块的监听全屏 */
    lisNavFullSCreen() {
      /* 看板全屏对比方式，兼容所有浏览器 */
      if (this.fullScreenDom.offsetHeight === window.screen.height) {
        console.log('全屏')
        this.$emit('hideBoard', true)
      } else {
        console.log('取消')
        this.$emit('hideBoard', false)
      }
    },
    jugeKey(e) {
      if (e.keyCode === 122) {
        e.preventDefault()
        console.log(this)
        this.util.fullScreen(this.fullScreenDom)
      }
    },
  },
  destroyed() {
    document.removeEventListener('keydown', this.jugeKey)
    window.onresize = null
    window.onresizeArr = []
  },
  deactivated() {
    document.removeEventListener('keydown', this.jugeKey)
    window.onresize = null
    window.onresizeArr = []
  },
}
</script>

<style lang="less">
.imitateNav {
  height: 25px;
  line-height: 25px;
  padding: 5px 20px;
  box-sizing: content-box;
  background-color: white;
  justify-content: space-between;
  position: absolute;
  width: calc(100% + 24px);
  left: -24px;
  top: -24px;
  z-index: 99;
  .imitateNavTitle {
    font-size: 14px;
    margin: 0 10px;
    font-weight: 600;
  }
  .iconLine {
    width: 8px;
    height: 100%;
  }
  .imitateNavRight {
    margin-right: 24px;
    & > div {
      cursor: pointer;
      align-items: center;
      img {
        margin: 0 10px 0 20px;
      }
    }
  }
}
</style>